<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Grid with Links</title>
    <style>
      .grid-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
      }

      .grid-item {
        width: calc(25% - 20px);
        margin-bottom: 30px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative; /* 用于定位绝对定位的元素 */
      }

      .grid-image {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .view-link {
        position: absolute; /* 绝对定位 */
        left: 20px; /* 距离左侧50px */
        bottom: 40px; /* 距离底部50px */
        color: #1890ff;
        text-decoration: none;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.7); /* 背景色使文字可见 */
        padding: 5px 10px;
        border-radius: 5px;
      }

      .view-link:hover {
        text-decoration: underline;
      }

      @media (max-width: 900px) {
        .grid-item {
          width: calc(50% - 15px);
        }
      }

      @media (max-width: 600px) {
        .grid-item {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <!-- Item 1 -->
      <div class="grid-item">
        <img src="002.png" alt="Open vip" class="grid-image" />
        <a href="#" class="view-link">立即查看 ></a>
      </div>
      <div class="grid-item">
        <img src="002.png" alt="Open vip" class="grid-image" />
        <a href="#" class="view-link">立即查看 ></a>
      </div>
      <div class="grid-item">
        <img src="002.png" alt="Open vip" class="grid-image" />
        <a href="#" class="view-link">立即查看 ></a>
      </div>
      <div class="grid-item">
        <img src="002.png" alt="Open vip" class="grid-image" />
        <a href="#" class="view-link">立即查看 ></a>
      </div>
    </div>
  </body>
</html>
